<template>
  <div>
    <!-- <el-button icon="el-icon-caret-bottom" class="drawer" @click="openDrawer()">查询条件</el-button> -->
    <!-- <el-drawer
      title="选择查询条件"
      :visible.sync="drawer"
      direction="ttb"
      :before-close="handleClose"
      style="width:100%;height:200%"
    >-->
    <el-row class="hearder">
      <el-button
        size="small"
        type="primary"
        @click="addSelect()"
        style="margin:0px 10px 10px 10px"
      >增加条件</el-button>
      <el-button
        size="small"
        type="primary"
        @click="onSubmit"
        style="margin:0px 10px 10px 10px"
      >确定查询</el-button>
    </el-row>

    <el-row>
      <el-form :model="selectLabelForm" label-width="80px" style="width:100%" inline>
        <el-row>
          <el-form-item style="width:29%;">
            <el-input disabled style="width:180px" value="作业单位" />
            <el-select
              v-model="workCompany"
              placeholder="请选择"
              clearable
              filterable
              style="width:140px"
            >
              <el-option v-for="item in workCompanyOptions" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="width:30%;">
            <el-input disabled style="width:180px" value="井名" />
            <el-input v-model="wellName" style="width:140px" clearable />
          </el-form-item>
          <el-form-item style="width:36%;">
            <el-input disabled style="width:20%" value="开钻时间" />
            <el-date-picker
              v-model="date1"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="width:35%"
            ></el-date-picker>-
            <el-date-picker
              v-model="date2"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              style="width:35%"
            ></el-date-picker>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            v-for="item in selectLabelForm.selectLabels"
            :key="item.key"
            style="width:30%;"
          >
            <el-select v-model="item.value" placeholder="请选择" style="width:180px">
              <el-option
                v-for="item in selectLabelData"
                :key="item.key"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              v-model="item.label"
              placeholder="请选择"
              clearable
              filterable
              style="width:140px"
            >
              <el-option v-for="item1 in item.data" :key="item1" :label="item1" :value="item1"></el-option>
            </el-select>
            <el-button
              size="mini"
              type="danger"
              circle
              icon="el-icon-minus"
              @click.prevent="removeSelect(item)"
            ></el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-row>

    <el-row>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="WELLNAME" label="井名" width="120"></el-table-column>
        <el-table-column prop="COUNTRY" label="国别"></el-table-column>
        <el-table-column prop="AREA" label="区域"></el-table-column>
        <el-table-column prop="BLOCK" label="区块"></el-table-column>
        <el-table-column prop="OILFIELD" label="油田" width="100"></el-table-column>
        <el-table-column prop="CEMENTCOMPANY" label="作业公司" width="120"></el-table-column>
        <el-table-column prop="WELLTYPE" label="井型"></el-table-column>
        <el-table-column prop="WELLSPACING" label="井别"></el-table-column>
        <el-table-column prop="DRILLINGSTARTTIME" label="开钻时间" width="100"></el-table-column>
        <el-table-column prop="DRILLINGFINISHTIME" label="完钻时间" width="100"></el-table-column>
        <el-table-column prop="ACTUALWELLDEPTH" label="完钻井深(m)" width="100"></el-table-column>
        <el-table-column prop="HOLETEMPERATURE" label="井底温度(℃)" width="120"></el-table-column>
        <el-table-column prop="HOLEPRESSURE" label="井底压力(psi)" width="120"></el-table-column>

        <el-table-column label="最大密度(g/cm3)" align="center">
          <el-table-column prop="HOLEMAXDENSITY" label="密度" width="50"></el-table-column>
          <el-table-column prop="HOLEMAXDENSITYCASINGSIZE" label="套管尺寸" width="80"></el-table-column>
          <el-table-column prop="HOLEMAXDENSITYSLURYSYSTEM" label="水泥浆体系" width="150"></el-table-column>
          <el-table-column prop="HOLEMAXDENSITYFLUIDDENSITITY" label="对应钻井液密度" width="120"></el-table-column>
        </el-table-column>

        <el-table-column label="最小密度(g/cm3)" align="center">
          <el-table-column prop="HOLEMINDENSITY" label="密度" width="50"></el-table-column>
          <el-table-column prop="HOLEMINDENSITYCASINGSIZE" label="套管尺寸" width="80"></el-table-column>
          <el-table-column prop="HOLEMINDENSITYSLURYSYSTEM" label="水泥浆体系" width="150"></el-table-column>
          <el-table-column prop="HOLEMINDENSITYFLUIDDENSITITY" label="对应钻井液密度" width="120"></el-table-column>
        </el-table-column>
        <el-table-column prop="WATERDEPTH" label="水深(m)" width="80"></el-table-column>
        <el-table-column prop="MUDLINETEMP" label="泥线温度(℃)" width="120"></el-table-column>
        <el-table-column prop="HDVSVD" label="水垂比" width="70"></el-table-column>
        <el-table-column prop="MAINCHALLENGE" label="重难点情况" width="120"></el-table-column>

        <el-table-column fixed="right" label="操作" align="center" width="240">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="toWellDetail(scope.row)">文件</el-button>
            <el-button size="mini" type="primary" @click="toWellDetailData(scope.row)">数据</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="toWellDetailCompare(scope.row.WELLNAME)"
            >对比</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-base">
        <el-pagination
          @current-change="handlePageChange"
          :current-page="form.pageIdx"
          :page-size="form.pageSize"
          :total="total"
          background
          layout="total, prev, pager, next, jumper"
        ></el-pagination>
      </div>
    </el-row>
  </div>
</template>
<script>
import {
  GetworkbaseData,
  GetWorkCompany,
  // getWork,
  GetCountryData,
  GetAreaData,
  GetBlockData,
  GetOilField,
  GetWellType
} from '@/api/module/dataquery'
import { Drawer, Transfer } from 'element-ui'

export default {
  components: { elDrawer: Drawer, elTransfer: Transfer },
  watch: {
    selectLabelForm: {
      handler: 'watchSelectLabelForm',
      deep: true
    }
  },
  data() {
    return {
      form: {
        wellName: '',
        country: '',
        oilfield: '',
        block: '',
        workCompany: '',
        wellType: '',
        wellSpacing: '',
        drillDate: '',
        actualWellDepth: '',
        holeTemperature: '',
        holePressure: '',
        holeMaxDensity: '',
        area: ''
      },
      workCompany: '',
      wellName: '',
      pager: {
        pageNum: 1,
        pageSize: 10
      },
      date1: '',
      date2: '',
      total: 0,
      tableData: [],
      workCompanyOptions: [],
      actualWellDepthOptions: ['2000', '2500', '3000', '3500', '4000'],
      holeTemperatureOptions: ['50', '100', '150', '200', '250'],
      holePressureOptions: ['1000', '3000', '5000', '7000', '9000', '10000'],
      holeMaxDensityOptions: ['1.9', '2.0', '2.1', '2.2', '2.3', '2.4'],
      selectLabelData: [
        // { id: 0, label: '作业单位' },
        // { id: 1, label: '开钻时间' },
        { id: 2, label: '国别', value: 'country' },
        { id: 3, label: '区域', value: 'area' },
        { id: 4, label: '区块', value: 'block' },
        { id: 5, label: '油田', value: 'oilfield' },
        { id: 6, label: '井型', value: 'wellType' },
        { id: 7, label: '井别', value: 'wellSpacing' },
        { id: 8, label: '完钻井深(m) ＞', value: 'actualWellDepth' },
        { id: 9, label: '井底温度(℃) ＞', value: 'holeTemperature' },
        { id: 10, label: '井底压力(psi) ＞', value: 'holePressure' },
        { id: 11, label: '最大密度(g/cm3) ＞', value: 'holeMaxDensity' }
      ],
      drawer: false,
      selectLabelCount: 0,
      selectLabelForm: {
        selectLabels: []
      },
      selectLabelParams: {}
    }
  },
  created() {
    // this.loaddata(this.pager.pageNum, this.pager.pageSize, this.form)
    if (this.$route.params['filterForm']) {
      this.dealParams()
    }
    this.getWorkCompany()
    this.getCountry()
    this.getArea()
    this.getBlock()
    this.getOilField()
    this.getWellType()
    this.dealSelectData(this.actualWellDepthOptions, 'actualWellDepth')
    this.dealSelectData(this.holeTemperatureOptions, 'holeTemperature')
    this.dealSelectData(this.holePressureOptions, 'holePressure')
    this.dealSelectData(this.holeMaxDensityOptions, 'holeMaxDensity')
  },
  methods: {
    // ----------- 查询数据方法 ----------------
    // 1. 获取列表数据
    loaddata(pageNum, pageSize, form) {
      // 构造drillDate
      let timeFlag = 0
      if (this.date1) {
        timeFlag++
      }
      if (this.date2) {
        timeFlag++
      }
      if (timeFlag !== 2 && timeFlag !== 0) {
        this.$message.error('时间请补充完整！')
        return
      }
      form.drillDate = this.date1 + '&' + this.date2
      console.log(JSON.stringify(form))
      GetworkbaseData(pageNum, pageSize, form)
        .then(res => {
          this.tableData = res.data.data.data
          this.total = res.data.data.total
          // this.pager.pageNum = res.data.data.page
          this.loading = false
        })
        .catch(err => {
          this.$message.error(err.message)
          this.loading = false
        })
    },
    // 2. 获取作业单位
    getWorkCompany() {
      GetWorkCompany()
        .then(res => {
          this.workCompanyOptions = res.data.data
        })
        .catch(e => {
          this.$message.error('未查询到作业单位数据！')
        })
    },
    // 3. 获取国别
    getCountry() {
      GetCountryData()
        .then(res => {
          this.dealSelectData(res.data.data, 'country')
        })
        .catch(e => {
          this.$message.error('未查询到国别数据！')
        })
    },
    // 4. 获取区域
    getArea() {
      GetAreaData()
        .then(res => {
          this.dealSelectData(res.data.data, 'area')
        })
        .catch(e => {
          this.$message.error('未查询到区域数据！')
        })
    },
    // 5. 获取区块
    getBlock() {
      GetBlockData()
        .then(res => {
          this.dealSelectData(res.data.data, 'block')
        })
        .catch(e => {
          this.$message.error('未查询到区块数据！')
        })
    },
    // 6. 获取油田
    getOilField() {
      GetOilField()
        .then(res => {
          this.dealSelectData(res.data.data, 'oilfield')
        })
        .catch(e => {
          this.$message.error('未查询到区域数据！')
        })
    },
    // 7. 获取井型、井别
    getWellType() {
      // 井型
      GetWellType({ label: '井型' })
        .then(res => {
          this.dealSelectData(res.data.data, 'wellType')
        })
        .catch(e => {
          this.$message.error('未查询到井型数据！')
        })
      GetWellType({ label: '井别' })
        .then(res => {
          this.dealSelectData(res.data.data, 'wellSpacing')
        })
        .catch(e => {
          this.$message.error('未查询到井型数据！')
        })
    },

    // ------------------- 点击事件函数 ----------------------
    // 1. 分页
    handlePageChange(page) {
      this.pager.pageNum = page
      this.loaddata(page, this.pager.pageSize, this.form)
    },
    loadFilterParams() {
      // 从query读取过滤条件
      // this.filterQuery = {...filterQuery, ...this.$route.query}
      // 从query中取到的参数是string的,要转成element要求的number
      this.form = {
        ...this.form,
        pageIdx: parseInt(this.form.pageIdx, 10),
        pageSize: parseInt(this.form.pageSize, 10)
      }
      console.log(this.form)
    },
    // 2. 确定查询
    onSubmit() {
      for (let f in this.form) {
        let label = this.selectLabelForm.selectLabels.find(
          item => item.value === f
        )
        if (label) {
          this.form[f] = label.label
        } else {
          this.form[f] = ''
        }
      }
      if (this.date1 == null) {
        this.date1 = ''
      }
      if (this.date2 == null) {
        this.date2 = ''
      }
      this.form.wellName = this.wellName
      this.form.workCompany = this.workCompany
      this.pager.pageNum = 1
      this.loaddata(this.pager.pageNum, this.pager.pageSize, this.form)
    },
    // 3. 打开抽屉
    openDrawer() {
      this.drawer = true
    },
    // 4. 关闭抽屉
    handleClose() {
      this.drawer = false
    },
    // 5. 增加查询条件
    addSelect() {
      if (this.selectLabelCount < this.selectLabelData.length) {
        this.selectLabelForm.selectLabels.push({
          label: '',
          value: '',
          data: '',
          key: Date.now()
        })
        this.selectLabelCount++
      } else {
        this.$message.warning(
          `最多增加${this.selectLabelData.length}个查询条件`
        )
      }
    },
    // 6. 减少查询条件
    removeSelect(item) {
      var index = this.selectLabelForm.selectLabels.indexOf(item)
      if (index !== -1) {
        this.selectLabelForm.selectLabels.splice(index, 1)
        this.selectLabelCount--
      }
    },
    // 7. toWellDetailData
    toWellDetailData(row) {
      this.$router.push({
        name: 'wellDetailData',
        params: { data: row, filterForm: this.form, pager: this.pager }
      })
    },
    // 8. toWellDetailCompare
    toWellDetailCompare(id) {
      this.$router.push({
        name: 'wellDetailCompare',
        params: { id: id, filterForm: this.form, pager: this.pager }
      })
    },
    toWellDetail(row) {
      this.$router.push({
        name: 'wellDetail',
        params: { data: row, filterForm: this.form, pager: this.pager }
      })
    },

    // ------------------- 处理数据函数 ----------------------
    // 1. 将查询到的基本配置数据，push 到数组
    dealSelectData(data, type) {
      this.selectLabelData.find(item => {
        if (item.value === type) {
          item['data'] = data
        }
      })
    },
    // 2. 监听函数
    watchSelectLabelForm(selectLabelForm) {
      if (selectLabelForm.selectLabels.length > 0) {
        selectLabelForm.selectLabels.forEach(item => {
          this.selectLabelData.forEach(ele => {
            if (item.value === ele.value) {
              item.data = ele.data
            }
          })
        })
        for (let f in this.form) {
          let label = selectLabelForm.selectLabels.find(
            item => item.value === f
          )
          if (label) {
            this.form[f] = label.label
          } else {
            this.form[f] = ''
          }
        }
      } else {
        this.selectLabelData.forEach(item => {
          this.form[item.value] = ''
        })
      }
    },
    dealParams() {
      this.form = this.$route.params.filterForm
      this.wellName = this.form.wellName
      this.workCompany = this.form.workCompany
      this.pager = this.$route.params.pager
      // this.selectLabelParams = this.deleteEmpty(this.$route.params.filterForm)
      // console.log(this.selectLabelForm.selectLabels)
      if (this.form.drillDate.length > 5) {
        let date = '2020-01-01&2020-02-01'.split('&')
        this.date1 = date[0]
        this.date2 = date[1]
      }
      this.loaddata(this.pager.pageNum, this.pager.pageSize, this.form)
    },
    closeCresteWell() {}
    // deleteEmpty(object) {
    //   let result = {}
    //   for (var name in object) {
    //     if (
    //       object[name] &&
    //       name != 'workCompany' &&
    //       name != 'wellName' &&
    //       name != 'drillDate'
    //     ) {
    //       result[name] = object[name]
    //     }
    //   }
    //   return result
    // }
  }
}
</script>

<style>
.hearder {
  background-color: #87ceeb;
  margin-bottom: 10px;
  padding-top: 5px;
  position: relative;
}
.drawer {
  position: relative;
  background-color: #409eff;
  margin-bottom: 10px;
}
.el-table--border,
.el-table--group {
  border-color: #000;
}
.el-table--border:after,
.el-table--group:after,
.el-table:before {
  background-color: #000;
}
.el-table td,
.el-table--border th,
.el-table th.is-leaf {
  border-bottom-color: #000;
}
.el-table--border td,
.el-table--border th {
  border-right-color: #000;
}
</style>
